<template>
  <template v-if="properties['flowable:conditionType'] || properties['flowable:conditionType'] === 0">
    <a-tooltip color="#fff" :overlay-style="{ maxWidth: '350px !important' }">
      <template v-if="isSilentMode" #title>
        <p class="text-content">
          <span class="text-gary">条件判断类型：</span>
          <span class="flex-1">{{
            properties['flowable:conditionType'] ? '由上一节点处理人决定' : '由条件分支流条件决定'
          }}</span>
        </p>
      </template>
      <div class="lf-html-wrapper">
        <div class="center-icon">
          <Icon size="48" color="#07C160"><CloseSharp /></Icon>
        </div>
      </div>
    </a-tooltip>
  </template>
  <template v-else>
    <div class="lf-html-wrapper">
      <div class="center-icon">
        <Icon size="48" color="#07C160"><CloseSharp /></Icon>
      </div>
    </div>
  </template>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue'
import { CloseSharp } from '@vicons/ionicons5'
import { Icon } from '@vicons/utils'

export default defineComponent({
  name: 'StartHtml',
  components: { CloseSharp, Icon },
  props: {
    name: {
      type: String,
      default: ''
    },
    graphModel: {
      type: Object,
      default: () => ({})
    },
    properties: {
      type: Object,
      default: () => ({})
    }
  },
  setup: (props, context) => {
    const { emit } = context
    const title = ref<string>('审批节点')
    const isSilentMode = ref<boolean>(false)
    isSilentMode.value = !!props.graphModel.editConfigModel?.isSilentMode

    props.graphModel.eventCenter.on('node:click', (el) => {
      console.log(el)
    })

    const changeData = () => {
      title.value = '标题hello-world'
      emit('changeData', title.value)
    }
    return {
      title,
      isSilentMode,
      changeData
    }
  }
})
</script>

<style scoped>
.lf-html-wrapper {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 43px;
  box-sizing: border-box;
  width: 51px;
  height: 51px;
  position: relative;
  top: 14.5px;
  left: 14.5px;
  box-shadow: 0px 0px 5px 2px #e0e0e0;
  transform: rotate(45deg);
}
.lf-html-wrapper .center-icon {
  transform: rotate(-45deg);
  position: relative;
  left: 2px;
  height: 100%;
}

.active {
  box-shadow: inset 0px 0px 5px 0px #f00;
}
.text-content {
  color: #333;
  display: flex;
}
</style>
